<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>郑州新密有限公司</text>
		</view>
	</view>

	<view class="body">
		<view class="coantent">
			<view class="cantair">
				<view class="select">
					<view class="box">
						<view class="bbs">
							<input type="text" placeholder="搜索企业查询" />
							<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/search.png" mode=""></image>
						</view>
					</view>
					<view class="bottomsss">
						<view class="year">
							<uni-data-select v-model="selectedYear" :localdata="yearRange" @change="handleYearChange"
								:clear="false" placeholder="请选择年份">
							</uni-data-select>
						</view>
	
						<view class="year">
							<uni-data-select v-model="quarters" :localdata="quarter" @change="handlequartersChange"
								:clear="false" placeholder="请选择季度">
							</uni-data-select>
						</view>
						<view class="year">
							<uni-data-select v-model="months" :localdata="month" @change="handlequartersChange"
								:clear="false" placeholder="请选择月份">
							</uni-data-select>
						</view>
	
					</view>
	
				</view>
	
	
	<scroll-view scroll-y="true" class="scroll-container">
		
		<view class="boxse">
			<text class="text">
				<text style="color: red;">2025</text>年<text style="color: red;">5</text>月份危废记录共产生<text
					style="color: red;">300</text>条数据,入库记录
				<text style="color: red;">200</text>条,出库记录 <text style="color: red;">100</text>条,转移联单<text
					style="color: red;">20</text>份
			</text>
		</view>
				<!-- 表格 -->
				<view class="table">
					<view class="tableshead">
						<view class="one">危废类别</view>
						<view class="one">产生量</view>
						<view class="one">自行处置</view>
						<view class="one">委外处置</view>
						<view class="one">库存量</view>
						<view class="one iju">处置方式接收单位</view>
						<view class="one">联单号</view>
					</view>
					<view class="table-box">
						<view class="table-boxs" v-for="(item,index) in tableData">
							<view class="two">废胶粘剂</view>
							<view class="two">{{item.stock}}</view>
							<view class="two">{{item.outbound}}</view>
							<view class="two">{{item.stock}}</view>
							<view class="two">{{item.stock}}</view>
							<view class="two">某某某有限公司</view>
							<view class="two">12345678022</view>
						</view>
	                   <view style="height: 30rpx; background-color: #fffff;"></view>
					</view>
				</view>
	</scroll-view>
			</view>
	
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';
	function back (){
		uni.navigateBack({
			delta:1
		})
	}

	var range = ref([{
			value: 1,
			text: "废气"
		},
		{
			value: 2,
			text: "活性炭"
		}
	])

	const selectedYear = ref(new Date().getFullYear());
	var quarters = ref("")
	// 年份选择器数据：最近10年
	const generateYearRange = (count) => {
		const currentYear = new Date().getFullYear();
		const years = [];
		for (let i = 0; i < count; i++) {
			const year = currentYear - i;
			years.push({
				text: `${year}年`,
				value: year,
			});
		}
		return years;
	};

	const yearRange = generateYearRange(100);



	const value = ref(null);

	// 年份选择变化事件
	const handleYearChange = (index) => {
		// console.log('选中的年份索引:', index);
		quarters.value = index
		console.log(quarters.value);
	};

	// 其他选择器变化事件
	const change = (e) => {
		console.log('选中值变化:', e);
	};

	var quarter = ref([{
		value: 1,
		text: "第一季度"
	}, {
		value: 2,
		text: "第二季度"
	}, {
		value: 3,
		text: "第三季度"
	}, {
		value: 4,
		text: "第四季度"
	}])

	var months = ref("")

	var month = ref([{
		value: 1,
		text: "一月"
	}, {
		value: 2,
		text: "二月"
	}, {
		value: 3,
		text: "三月"
	}, {
		value: 4,
		text: "四月"
	}, {
		value: 5,
		text: "五月"
	}, {
		value: 6,
		text: "六月"
	}, {
		value: 7,
		text: "七月"
	}, {
		value: 8,
		text: "八月"
	}, {
		value: 9,
		text: "九月"
	}, {
		value: 10,
		text: "十月"
	}, {
		value: 11,
		text: "十一月"
	}, {
		value: 12,
		text: "十二月"
	}])
	
	
	const tableData = [
	    {
	        category: '废活性炭',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    },
	    {
	        category: '废油漆桶',
	        inbound: '100桶',
	        outbound: '50桶',
	        stock: '50桶',
	        details: '查看详情'
	    },
	    {
	        category: '废机油',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    },
	    {
	        category: '污泥',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    },
	    {
	        category: '废灯管',
	        inbound: '100个',
	        outbound: '50个',
	        stock: '50个',
	        details: '查看详情'
	    },
	    {
	        category: '污泥',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    },
	    {
	        category: '废机油',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    },
	    {
	        category: '污泥',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    },
	    {
	        category: '废灯管',
	        inbound: '100个',
	        outbound: '50个',
	        stock: '50个',
	        details: '查看详情'
	    },
	    {
	        category: '污泥',
	        inbound: '100吨',
	        outbound: '50吨',
	        stock: '50吨',
	        details: '查看详情'
	    }
	];
</script>

<style lang="scss" scoped>
	.scroll-container{
		height: calc(100vh - 400rpx); /* 根据实际布局调整高度 */
	}
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		// width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			// width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;

		.coantent {
			width: 750rpx;
			background-color: #FFFFFF;

			.cantair {
				width: 749rpx;
				height: 237rpx;
				background-color: #FFFFFF;

				.select {
					width: 677rpx;
					height: 237rpx;
					// background-color: red;
					margin: 0 auto;
					// overflow: hidden;
					position: relative;

					.box {
						width: 667rpx;
						height: 75rpx;
						background: #F3F5F7;
						border-radius: 38rpx;
						position: absolute;
						top: 30rpx;

						.bbs {
							width: 667rpx;
							height: 75rpx;
							background: #F3F5F7;
							border-radius: 38rpx;
							position: relative;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 25rpx;
							color: #ABABBB;
							text-indent: 38rpx;
							input{
								width: 667rpx;
								height: 75rpx;
								background: #F3F5F7;
								border-radius: 38rpx;
							}
							image{
								width: 30rpx;
								height: 31rpx;
								position: absolute;
								top: 25rpx ;
								right: 45rpx;
							}
						}
					}

					.bottomsss {
						width: 677rpx;
						height: 75rpx;
						// background-color: #0874FA;
						position: absolute;
						top: 131rpx;
						display: flex;

						.year {
							width: 209rpx;
							height: 75rpx;
							background: #F3F5F7;
							border-radius: 38rpx;
							position: relative;

							.uni-stat__select {
								width: 190rpx;
								height: 75rpx;
								border-radius: 50%;
								background: #F3F5F7 !important;
								position: absolute;
								left: 10rpx;
								border-radius: 30% !important;

							}
						}
					}
				}
			}
		}
	}

	.uni-stat__select {
		width: 630rpx;
		height: 75rpx;
		border-radius: 50%;
		background: #F3F5F7;
		position: absolute;
		border: none;
		left: 20rpx;
	}

	.uni-stat-box {
		width: 667rpx;
		height: 75rpx;
		background: red;
		border-radius: 50%;
		border: none;
	}

	.uni-stat-box {
		width: 667rpx;
		height: 75rpx;
		background: red;
		border-radius: 50%;
	}

	.boxse {
		width: 640rpx;
		height: auto;
		/* 自适应高度 */
		background: #FFFFFF;
		border-radius: 14rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 31rpx;
		color: #FA0808;
		line-height: 49rpx;
		border: 1px solid #A7A7A7;
		margin: 22rpx auto;
		padding: 20rpx 30rpx;
		/* 内边距调整 */
		display: flex;
		align-items: center;

		.text {
			display: block;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 31rpx;
			color: #828282;
			line-height: 45rpx;
			/* 调整行高 */
			word-break: break-all;
			/* 允许自动换行 */
			text-align: justify;
			/* 文字两端对齐 */
		}
	}

	.table {
		width: 749rpx;
		height: 100%;
		// background-color: #0874FA;
	}

	.tableshead {
		width: 749rpx;
	    height: 122rpx;
		background: #E9F0FF;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.one {
			width: 86rpx;
			height: 69rpx;
			font-family: Microsoft YaHei;
			font-weight: 600;
			font-size: 29rpx;
			color: #030303;
			text-align: center;
			// line-height: 40rpx;
			// background-color: red;
			// background-color: #030303;
		}
		.iju{
			width: 119rpx;
		}

	}

	.table-box {
		width: 749rpx;
		height: 100%;
		text-align: center;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		.two {
			height: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			// background-color: #030303;
		}
	}
	.table-boxs{
		width: 749rpx;
		height: 122rpx;
		// background-color: #FA0808;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.twos{
		width: 156rpx;
		height: 53rpx;
		background: rgba(8, 116, 250, .14);
		border-radius: 26rpx;
		text-align: center;
		line-height: 53rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 27rpx;
		color: #0874FA;
		
	}
	.one, .two {
		width: calc(20% - 20rpx); 
	}
	
	.twos {
		width: calc(20% - 20rpx); 
	}
	.table-boxs:nth-child(odd) {
		background-color: #ffffff;
	}
	
	/* 设置偶数行背景色为绿色（浅绿） */
	.table-boxs:nth-child(even) {
	background: #F3F5F9;
	}
</style>